"use client"
import React, { useState, useEffect } from 'react';
import { Button, DatePicker, Divider, Input, Menu, Select, Space, Table, Tag, Popconfirm } from 'antd';
import type { MenuProps, TableProps } from 'antd';
import { useRouter } from 'next/navigation';
import { useSelector } from 'react-redux';
import * as API from '../../../../../utils/https';
import {
    CheckCircleFilled,
    EditFilled,
    VerticalAlignTopOutlined,
    DeleteFilled,
    SearchOutlined,
    RedoOutlined,
    ZoomInOutlined
} from '@ant-design/icons';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
    id: number;
    key: string;
    name: string;
    Customer: string;
    stage: string;
    bjnum: string;
    price: string;
    time: number;
    days: number;
}

// 三级导航数据


const App: React.FC = () => {
    const [table, setTable] = useState<DataType[]>([]);
    const [title, setTitle] = useState('');
    const [data, setData] = useState<DataType | null>(null);

    useEffect(() => {
        API.http_table().then(res => {
            console.log(res);
            setTable(res);
        });
    }, []);
    type MenuItem = Required<MenuProps>['items'][number];

    const items: MenuItem[] = [
    {
      key: '/fff/dingdan/allding',
      label: (
        <div >
          全部订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/mydingdan',
      label: (
        <div>
          我的订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashudingdan',
      label: (
        <div>
          下属订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashuxiezuo',
      label: (
        <div>
          下属写作
        </div>
      ),
    },
    {
      key: '/fff/dingdan/woxiezuo',
      label: (
        <div>
          我的协作
        </div>
      )
    },
    {
      key: '/fff/dingdan/adddingdan',
      label: (
        <div>
          添加订单
        </div>
      ),
    }
  ];
    const columns: TableProps<DataType>['columns'] = [
        {
            title: ' 订单标题',
            dataIndex: 'name',
            render: (name) => <div style={{ color: 'rgb(0,121,254)' }}>{name}</div>,
        },
        {
            title: '关联客户',
            dataIndex: 'Customer',
            render: (Customer) => <div style={{ color: 'rgb(0,121,254)' }}>{Customer}</div>,
        },
        {
            title: ' 订单阶段',
            dataIndex: 'stage'
        },
        {
            title: '报价记录',
            dataIndex: 'bjnum',
            render: (bjnum) => <div style={{ color: 'rgb(0,121,254)' }}>{bjnum}</div>,
        },
        {
            title: '报价总金额',
            dataIndex: 'price'
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => {
                        setTitle("编辑");
                        setData(record);
                router.push("/fff/dingdan/adddingdan")

                    }}><EditFilled />编辑</a>
                    <a><VerticalAlignTopOutlined />置顶</a>
                    <Popconfirm
                        title="删除框"
                        description="确定要删除吗?"
                        okText="确定"
                        cancelText="取消"
                        onConfirm={() => {
                            setTable( API.http_deltable(record.id));
                        }}
                    >
                        <a><DeleteFilled />删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const router = useRouter();
    const [current, setCurrent] = useState('mail');

    const onClick: MenuProps['onClick'] = (e) => {
        setCurrent(e.key);
        router.push(e.key);
    };

    // 多选
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection: TableRowSelection<DataType> = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
        ]
    };

    return (
        <>
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
            <Divider />
            <div>
                <Space>
                    <Input placeholder="搜索关键词" />
                    <Select
                        placeholder=" 订单阶段"
                        style={{ width: 150 }}
                        options={[
                            { value: '初步洽谈', label: '初步洽谈' },
                        ]}
                    />
                    <Select
                        placeholder=" 订单来源"
                        style={{ width: 150 }}
                        options={[
                            { value: '1', label: '1' },
                        ]}
                    />
                    <Select
                        placeholder="成交机率"
                        style={{ width: 150 }}
                        options={[
                            { value: '1', label: '1' },
                        ]}
                    />
                    <DatePicker placeholder='预计签单日期' />
                    <Button type="primary"><SearchOutlined />查询</Button>
                    <Button><RedoOutlined />重置</Button>
                    <Button style={{ color: 'rgb(0,121,254)' }}><ZoomInOutlined />高级搜索</Button>
                </Space>
                <Divider />
            </div>
            <Button onClick={()=>{
                setTitle("添加")
                router.push("/fff/dingdan/adddingdan")
}}>添加</Button>
            <Table<DataType> rowSelection={rowSelection} bordered columns={columns} dataSource={table} pagination={{ defaultPageSize: 8 }} />
        </>
    );
};

export default App;
    